<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
let isCollapse = ref(true)
const handleOpen = (key, keyPath) => {//菜单展开
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {//菜单折叠
  console.log(key, keyPath)
}
</script>

<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside class="aside" :style="{ 'width': !isCollapse ? '200px' : '60px' }">

        <el-menu default-active="/" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
          @close="handleClose" router>
          <el-menu-item index="/">
            <el-icon><icon-menu /></el-icon>

            <template #title>首页</template>
          </el-menu-item>
          <el-sub-menu index="gongsi">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>公司信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/gongsi/DeptInfo">部门管理</el-menu-item>
              <el-menu-item index="/gongsi/EmployeeInformation">员工管理</el-menu-item>
            </el-menu-item-group>

          </el-sub-menu>

          <el-menu-item index="3">
            <el-icon>
              <document />
            </el-icon>

            <template #title>公司图表数据</template>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon>
              <setting />
            </el-icon>

            <template #title>暂未开发...</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :value="false">展开</el-radio-button>
            <el-radio-button :value="true">折叠</el-radio-button>
          </el-radio-group>
          头部</el-header>
        <el-main class="main">
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.container {
  height: 100vh;

  .aside {
    background-color: #fff;
  }

  .header {
    background-color: chocolate;
  }

  .main {
    background-color: beige;
  }
}
</style>
